<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <style>
        * {
            box-sizing: border-box;
        }
        html,
        body {
            border: 0;
            padding: 0;
            margin: 0;
            height: 100vh;
            width: 100vw;
        }
        .side {
            flex-grow: 1;
            height: 100%;
            width: 100%;
        }
        .container {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .editor {
            height: 100%;
        }
    </style>
    <body>
        <xy-tab style="width: 100%; height: 100%">
            <xy-tab-content label="Describer" class="container">
                <!-- 使用 -->

                <div class="side">
                    <xy-button-group>
                        <xy-button type="primary">导入 JSON 文件</xy-button>
                        <xy-button type="primary" id="TransformJSON">
                            Describe JSON
                        </xy-button>
                        <span class="margin:8px;">请输入 JSON 字符串</span>
                    </xy-button-group>

                    <div id="input" class="editor"></div>
                </div>
                <div class="side">
                    <div id="output" class="editor"></div>
                </div>
            </xy-tab-content>
            <xy-tab-content
                label="GitObject"
                class="container"
                style="flex-direction: column"
            >
                <xy-button-group>
                    <xy-button type="primary" id="gitDiff-back"
                        >后退一个版本</xy-button
                    >
                    <xy-button type="primary" id="gitDiff-go">
                        前进一个版本
                    </xy-button>
                    <div>版本序号 ：<span id="gitDiff-version">1</span></div>
                </xy-button-group>
                <div class="side">
                    <div id="GitObjectDiff" class="editor"></div>
                </div>
            </xy-tab-content>
        </xy-tab>
    </body>

    <script type="module" src="https://unpkg.com/xy-ui"></script>
    <script type="module">
        import getMonaco from "./demo/js/getMonaco.js";
        import { GitObject, ObjectDescriber } from "./dist/index.browser.js";
        function GetDiff() {
            const gitObject = window.gitObject;
            const newObj = JSON.stringify(gitObject.now, null, 4);
            gitObject.review(gitObject.cursor - 1);
            const oldObj = JSON.stringify(gitObject.now, null, 4);

            gitObject.review(gitObject.cursor + 1);
            return [oldObj, newObj];
        }
        // Describer 的展示
        getMonaco()
            .then((monaco) => {
                window.Input = monaco.editor.create(
                    document.getElementById("input"),
                    {
                        value: "",
                        language: "json",
                    }
                );

                window.Output = monaco.editor.create(
                    document.getElementById("output"),
                    {
                        value: "",
                        language: "json",
                    }
                );
                window.TransformJSON = () => {
                    try {
                        const source = JSON.parse(window.Input.getValue());
                        const result = ObjectDescriber(source);
                        window.Output.setValue(JSON.stringify(result, null, 4));
                        console.log(result);
                        XyMessage.success("转化成功");
                    } catch (err) {
                        XyMessage.error("转化失败啦");
                    }
                };
                document
                    .getElementById("TransformJSON")
                    .addEventListener("click", TransformJSON);
                window.Input.onDidBlurEditorText(TransformJSON);
            })
            .then(() => {
                window.gitObject = new GitObject({});
                gitObject.add("data.list.tlist", 8080);
                gitObject.add("data.list.vlist", [8080, 29323, 32323]);
                gitObject.add("data.list.tlist", 9999);
                gitObject.delete("data.list.tlist");
                gitObject.delete("data.list.vlist");
                gitObject.review(1);
                const monacoDiffInstance = monaco.editor.createDiffEditor(
                    document.getElementById("GitObjectDiff"),
                    {
                        readOnly: true,
                    }
                );

                const [oldObj, newObj] = GetDiff();
                const New = monaco.editor.createModel(newObj, "json");
                const Old = monaco.editor.createModel(oldObj, "json");

                monacoDiffInstance.setModel({
                    original: Old,
                    modified: New,
                });
                document
                    .getElementById("gitDiff-back")
                    .addEventListener("click", () => {
                        gitObject.review(gitObject.cursor - 1);
                        const [oldObj, newObj] = GetDiff();
                        New.setValue(newObj);
                        Old.setValue(oldObj);
                        document.getElementById("gitDiff-version").innerText =
                            gitObject.cursor;
                    });
                document
                    .getElementById("gitDiff-go")
                    .addEventListener("click", () => {
                        gitObject.review(gitObject.cursor + 1);
                        const [oldObj, newObj] = GetDiff();
                        New.setValue(newObj);
                        Old.setValue(oldObj);
                        document.getElementById("gitDiff-version").innerText =
                            gitObject.cursor;
                    });
            });
    </script>
</html>
